<template>
  <div :class="{ block: true, 'is-full': isFull, [className]: true }">
    <div class="title-contaienr">
      <span class="title" v-html="title"></span><span class="sub-title" v-if="subTitle">{{ subTitle }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 是否通栏
    isFull: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    subTitle: {
      type: String,
      default: '',
    },
    className: {
      type: String,
      default: '',
    },
  },
};
</script>
<style lang="less" scoped>
.block {
  margin: 16px 12px;
  padding: 24px 20px;
  border-radius: 12px;
  &.is-full {
    margin: 16px 0;
    padding: 24px 32px;
    border-radius: 0;
  }
  background-color: var(--bg-color-2);
  .title-contaienr {
    display: flex;
    align-items: center;
    .title {
      font-family: PingFangSC-Semibold;
      font-size: 36px;
      color: rgba(0, 0, 0, 0.84);
      letter-spacing: 0;
      line-height: 44px;
      font-weight: 600;
    }
    .sub-title {
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.4);
      font-weight: 400;
      margin-left: 12px;
    }
  }
}
</style>
